import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    StyleSheet
} from 'react-native';

import {
    Press
} from './../../components';

import * as CONST from './../../const';

import ScrollPicker from 'react-native-picker-scrollview';

const _length = 100 - 17;

const rows = (
    Array.from({
        length: _length
    }).map((item, i) => i + 18)
)

interface State {
    min: number,
    max: number
}

interface Props {
    min:number,
    max:number,
    onConfirm:Function,
    onDialogClose:Function
}

class AgeRange extends PureComponent <Props, State> {

    constructor(props:Props) {
        super(props);

        const {
            min,
            max
        } = props;

        this.state = {
            max: max,
            min:  this._min(min, max)
        }
    }

    static defaultProps = {
        min:18,
        max:100,
        onConfirm:() => null,
        onDialogClose:() => null
    }

    private minSp: any = null;
    private maxSp: any = null;

    private _renderItem = (
        data:any,
        index:number,
        selected:boolean
    ) => {
        const textStyle = (
            [styles.text]
        )

        if (selected) {
            textStyle.push(styles.selected)
        }

        return (
            <View style={styles.itemStyle}>
                <Text style={textStyle}>
                    {data}
                </Text>
            </View>
        )
    }

    private _onMinValueChange = (
        data: number
    ) => {
        const {
            max
        } = this.state;

        if (data > max) {
            data = max;
            const _index = this._findIndex(max)
            this.minSp.scrollToIndex(_index)
        }

        this.setState({
            min: data
        })
    }

    private _onMaxValueChange = (
        data: number
    ) => {
        const {
            min
        } = this.state;

        if (data < min) {
            data = min;
            const _index = this._findIndex(min)
            this.maxSp.scrollToIndex(_index)
        }

        this.setState({
            max: data
        })
    }

    private get minIndex() {
        const {
            min
        } = this.state;
        return this._findIndex(min);
    }

    private get maxIndex() {
        const {
            max
        } = this.state;
        return this._findIndex(max);
    }

    private _findIndex = (value?: number) => (
        rows.findIndex(val => value === val)
    )

    private get Props() {
        return {
            itemHeight: 48,
            dataSource: rows,
            wrapperHeight: 240,
            wrapperColor: `#fff`,
            highlightColor: `#ccc`,
            renderItem: this._renderItem
        }
    }

    private _onDone = () => {
        const {
            min,
            max
        } = this.state;

        const {
            onConfirm
        } = this.props;

        onConfirm({
            min,max
        })

        this.close();
    }

    private _min = (
        min:number,
        max:number
    ) => {
        return min > max ? max : min;
    }

    close = () => {
        const {
            onDialogClose
        } = this.props;
        onDialogClose()
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Press
                        onPress={this.close}
                        style={styles.buttonStyle}
                    >
                        <Text style={styles.buttonText}>
                            Cancel
                        </Text>
                    </Press>
                    <Press
                        onPress={this._onDone}
                        style={styles.buttonStyle}
                    >
                        <Text style={styles.buttonDone}>
                            Done
                        </Text>
                    </Press>
                </View>
                <View style={styles.content}>
                    <ScrollPicker
                        {...this.Props}
                        ref={(e:any) => this.minSp = e}
                        selectedIndex={this.minIndex}
                        onValueChange={this._onMinValueChange}
                    />
                    <ScrollPicker
                        {...this.Props}
                        ref={(e:any) => this.maxSp = e}
                        selectedIndex={this.maxIndex}
                        onValueChange={this._onMaxValueChange}
                    />
                </View>
            </View>
        )
    }
}

export default AgeRange;

const styles = StyleSheet.create({
    content: {
        height: 220,
        flexDirection: `row`
    },
    text: {
        fontSize: 16,
        color: `#888`,
        fontFamily:CONST.fontFamily
    },
    selected: {
        color: CONST.color
    },
    header: {
        height: 48,
        flexDirection: `row`,
        backgroundColor: `#f6f6f6`,
        justifyContent: `space-between`
    },
    buttonStyle: {
        height: 48,
        alignItems: `center`,
        justifyContent: `center`,
        paddingHorizontal: 16
    },
    buttonText: {
        fontSize: 14,
        color: `#888`,
        fontWeight:`700`
    },
    buttonDone:{
        fontSize: 14,
        color: CONST.color,
        fontWeight:`700`
    }
}) as any;